<template>
  <div>
    <el-tooltip
      class="box-item"
      :content="`${isFullScreen ? '关闭全屏' : '显示全屏'}`"
      placement="bottom"
    >
      <el-icon size="1.5rem" class="mr-1" @click="toggleFullScreen">
        <FullScreen />
      </el-icon>
    </el-tooltip>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const isFullScreen = ref(false);

/**
 * 全屏显示
 */
function toggleFullScreen() {
  const element = document.documentElement;

  if (document.fullscreenElement) {
    document.exitFullscreen();
    isFullScreen.value = false;
  } else {
    element.requestFullscreen();
    isFullScreen.value = true;
  }

  // else if ('mozRequestFullScreen' in element) {
  //   element.mozRequestFullScreen();
  // } else if (element.webkitRequestFullscreen) {
  //   element.webkitRequestFullscreen();
  // } else if (element.msRequestFullscreen) {
  //   element.msRequestFullscreen();
  // }
}
</script>

<style lang="scss" scoped></style>
